<script setup lang="ts">
import { GDMButton } from 'blogui-mobile-vue'
</script>

<template>
  <div>
    <DemoBox title="颜色">
      <div class="space">
        <GDMButton>default</GDMButton>
        <GDMButton color="primary">primary</GDMButton>
        <GDMButton color="warning">warning</GDMButton>
        <GDMButton color="danger">danger</GDMButton>
        <GDMButton color="success">success</GDMButton>
      </div>
    </DemoBox>
    <DemoBox title="填充模式">
      <div class="space">
        <GDMButton fill="solid" color="primary">solid</GDMButton>
        <GDMButton fill="outline" color="primary">outline</GDMButton>
        <GDMButton fill="none" color="primary">none</GDMButton>
      </div>
    </DemoBox>
    <DemoBox title="加载中">
      <GDMButton loading loadingText="加载中"></GDMButton>
    </DemoBox>
  </div>
</template>

<style>
.space {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
</style>
